<!-- 套系专题 -->
<template>
    <div class="com-container">
        <xszk-header 
            :isHeadSearch="true"
            :isLoginShow="isLoginShow"
            @onLogin="isLoginShow=true"
            @onClose="isLoginShow=false"
        ></xszk-header>
        <div class="com-main">
            <div class="mt25 flex jus-b">
                <div class="list-wrapfl">
                    <div class="fs14">当前共收录<span style="color:#2E63CF">{{currentPage.total}}</span>个套系</div>
                    <xszk-list-tree
                        class="mt15"
                        v-for="(item,index) in getDataTree"
                        :key="index"
                        :treeData="item"
                        @cateTreeChange="cateTreeChange"
                        @noChildChange="noChildChange"
                    ></xszk-list-tree>
                </div>
                <div class="list-wrapfr">
                    <div class="cont-top">
                        <span class="fs16 ctheme">更新时间</span>
                        <i class="cp ctheme pl7 fs14" :class="isSortTime?'el-icon-top':'el-icon-bottom'"  @click="isSortTime=!isSortTime"></i>
                    </div>
                    <ul class="list-cont">
                        <li
                            v-for="(item,index) in getDataList"
                            :key="index"
                        >
                            <div class="list-img" @click="toSerIntroducePage(item)">
                                <img :src="item.book_info.components.author_img" class="img100">
                            </div>
                            <div class="list-desc">
                                <h3 class="fs18 cp" style="color:#112C71" @click="toSerIntroducePage(item)">{{item.book_info.name}}</h3>
                                <div class="mt15 fs14 c666 flex ali-c">
                                    <div>更新于：{{item.book_info.update_time.split(" ")[0]}}</div>
                                    <div class="ml40">作者：{{item.book_info.author}}</div>
                                </div>
                                <p class="mt10 fs16 twoline" style="line-height:25px">{{item.book_info.abs}}</p>
                                <button class="com-full-btn mt10" @click="toSerIntroducePage(item)">查看详情</button>
                            </div>
                        </li>
                    </ul>
                    <el-pagination
                        v-if="currentPage.total > currentPage.size&&currentPage.total != 0" 
                        class="mt25 mr30 tr"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pager-count="5"
                        :page-sizes="[10, 20, 30]"
                        :current-page="currentPage.page"
                        :page-size="currentPage.size"
                        :total="currentPage.total"
                        layout="sizes, prev, pager, next"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {baseUrl} from '../../http/baseUrl';
export default {
    name: "serTopics",
    components:{
        xszkHeader: (resolve) =>require([ "@/components/xszkHeader",], resolve),
        xszkListTree: (resolve) =>require(["@/components/xszkListTree",], resolve),
        xszkMainView: (resolve) =>require(["@/components/xszkMainView",], resolve),
    },
    computed: {
        token(){
            return this.$store.getters.token;
        },
    },
    data() {
        return {
            isLoginShow:false,
            isSortTime:false,
            getCategorysId:'',
            getCateChildId:'',
            getDataTree:[],
            getDataList:[],
            currentPage: {
                page: 1,
                size: 10,
                total: 0,
            },
            
        };

    },
    methods: {
        toSerIntroducePage(item){
            this.$router.push({path:'/serIntroduce',query: {productId:item.product_id}});
        },
        handleCurrentChange(val) {
            this.currentPage.page = val;
            this.getCategorysList();
        },
        handleSizeChange(val) {
            this.currentPage.size = val;
            this.getCategorysList();
        },
        initDataList(){
            this.currentPage.page = 1;
            this.getCategorysList();
        },
        cateTreeChange(item){
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = (item.pid == treeItem._id)?true:false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen = (item.pid == treeChildItem._id)?true:false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            })
            item.isOpen = true;
            this.getDataTree = this.stringutils.deepClone(this.getDataTree);
            this.getCategorysId = item.pid;
            this.getCateChildId = item._id;
            this.initDataList();
        },
        noChildChange(items){
            this.getDataTree.forEach(treeItem => {
                treeItem.isOpen = false;
                if(treeItem.childList.length!=0){
                    treeItem.childList.forEach(treeChildItem => {
                        treeChildItem.isOpen=false;
                        if(treeChildItem.childList.length!=0){
                            treeChildItem.childList.forEach(childSonItem => {
                                childSonItem.isOpen = false;
                            });
                        }
                    })
                }
            })
            items.isOpen = true;
            this.getDataTree = this.stringutils.deepClone(this.getDataTree);
            this.getCategorysId = items._id;
            this.getCateChildId = items._id;
            this.initDataList();
        },
        loopData(resData,rootArr){
            rootArr.forEach(rootItem => {
                resData.forEach(resItem => {
                    if(rootItem._id == resItem.pid){
                        rootItem.childList.push(resItem);
                    }
                });
                if(rootItem.childList.length>0){
                    rootItem.childList.forEach(childItem => {
                        resData.forEach(resItem => {
                            if(childItem._id == resItem.pid){
                                childItem.childList.push(resItem);
                            }
                            if(childItem.childList.length>0){
                                resData.forEach(resItem => {
                                    childItem.childList.forEach(childItem11 => {
                                        if(childItem11._id == resItem.pid){
                                            childItem11.childList.push(resItem);
                                        }
                                    });
                                });
                            }
                        });
                    });
                }
            });
            return rootArr;
        },
        getNumList(rootBigArr){
            let that = this;
            let data = {
                type:'subject',
                pid: 'root'
            };
            this.request.getDataCategorys(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    let computList = [];
                    if(rootBigArr.length!=0){
                        resData.forEach(resItem => {
                            rootBigArr.forEach(treeItem => {
                                if(treeItem.childList.length!=0){
                                    treeItem.childList.forEach((treeChildItem,index) => {
                                        if(treeChildItem._id == resItem._id ){
                                            if(resItem.number>0){
                                                treeChildItem.number = resItem.number;
                                            }else{
                                                treeItem.childList.splice(index,1)
                                            }
                                        }
                                    })
                                }
                            })
                        });
                    }
                    //目前假数据
                    rootBigArr[0].childList[0].childList.splice(1,2);
                    rootBigArr[0].childList[0].childList[0].number = 1;
                    // console.log(rootBigArr);
                    that.getDataTree = that.stringutils.deepClone(rootBigArr);
                    if(that.getDataTree.length!=0&&that.getDataTree[0].childList.length!=0){
                        that.getDataTree[0].childList[0].isOpen = true;
                        if(that.getDataTree[0].childList[0].childList.length!=0){
                            that.getDataTree[0].childList[0].childList[0].isOpen = true;
                            that.getCategorysId = rootBigArr[0].childList[0]._id;
                            that.getCateChildId = rootBigArr[0].childList[0].childList[0]._id;
                        }else{
                            that.getCategorysId = rootBigArr[0]._id;
                            that.getCateChildId = rootBigArr[0].childList[0]._id;
                        }
                        that.getCategorysList();
                    }
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getCateTree(){
            let that = this;
            let data = {
                type:'subject',
            };
            this.request.getDataCategorys(data, (res)=> {
                if (res.code == "0") {
                    let resData = res.data;
                    let rootArr = [];
                    let rootBigArr = [{name:'套系分类',isOpen:false,childList:[]}];
                    if(resData.length>0){
                        for (let i in resData) {
                            resData[i].isOpen = false;
                            resData[i].childList = [];
                            resData[i].number = null;
                            if(resData[i].pid =='root'){
                                rootArr.push(resData[i])
                            }
                        }
                        rootBigArr[0].childList = that.loopData(resData,rootArr);
                    }
                    that.getNumList(rootBigArr);
                    // console.log(that.getDataTree);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getCategorysList(){
            let that = this;
            this.$http({
                method:'GET',
                headers:{
                    PageStart:this.currentPage.page-1,
                    PageOffset:this.currentPage.size,
                    ApiToken:this.token,
                },
                url:`${baseUrl.getBaseUrl()}/_md/lib/api/data_categorys/${this.getCategorysId}/subjects?id=${this.getCateChildId}`,
            }).then(res=>{
                if (res.data.code == "0") {
                    that.getDataList = [];
                    that.currentPage.total = res.data.page.total;
                    let resData = res.data.data;
                    that.getDataList = resData;
                    // console.log(that.getDataList);
                } else {
                    that.toast.error(res.data.message);
                }
            });
        },
        
    },
   
    created() {
        this.getCateTree();
        
    },
    
    

};
</script>

<style lang="stylus" scoped>
.list-wrapfl
    width 240px
    height auto
.list-wrapfr
    width 944px
    min-height 500px
    background #FFFFFF
    border-radius 4px
    .cont-top
        width 100%
        height 50px
        line-height 50px
        padding 0 35px
        border-bottom 1px solid #ddd
    .list-cont li
        display flex
        align-items center
        justify-content space-between
        width 100%
        padding 20px 36px
        border-bottom 1px solid #ddd
        .list-img
            flex-shrink 0
            width 160px
            height 165px
            overflow hidden
            cursor pointer
        .list-desc
            width 640px
            overflow hidden
</style>